<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/sockjs.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="js/bootstrap.min.js"></script>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript">
	var websocket =null;
	if (window['WebSocket']) {
		//alert( window.location.host);
		websocket = new WebSocket('ws://' + window.location.host + '/websocket/marco');
	}
	else
		websocket = new SockJS('/websocket/js/marco');
		
	websocket.onopen = function() {
		//alert('Opening');
		websocket.send("");
		//sayMarco();
	};
	websocket.onmessage = function(e) {
		//alert('Received message: '+e.data);
		$('#msg').append("<li>"+e.data+"</li>");
	};
	websocket.onclose = function() {
		alert('Closing');
	};
	function sayMarco() {
		alert('Sending Marco!');
		websocket.send("Marco!");
	}  
	function send(){
		//websocket.send($('input').val());
		$.get("/websocket/chat",{msg:$('textarea').val()});
		$('textarea').val('');
	}
    function sendOnKey(event){
        var code;
        if(window.event){
            code = window.event.keyCode; // IE
        }else{
            code = e.which; // Firefox
        }
        if(code==13){
            $.get("/websocket/chat",{msg:$('textarea').val()});
            $('textarea').val('');
        }
    }
</script>
	
</head>
<body >
	<div style="margin-left: 50px;margin-top: 50px;" >
		<div style="width: 1000px;height: 650px;float: left;">
			<div style="width: 1000px;height: 400px;border: 1px gray solid;" background="css/image/chat1.jpg" >
				<ul id="msg">
				</ul>
			</div>
			<div style="float: left;">
				<textarea class="form-control" rows="10" onkeydown="sendOnKey(event)" style="width:1000px;height:215px ;"></textarea>
				<button type="button" class="btn btn-primary" onclick="send()" style="height: 30px;margin-top:5px;margin-left: 900px;">发送</button><br>
			</div>
		</div>
		<div style="width: 400px;height: 650px;float: left;border: 1px gray solid;" ></div>

	</div>
</body>
</html>